<template>
  <div class="container">
    <swiperComponents></swiperComponents>
    <ul>
      <li v-for="value in content" @click="select(value.id)">
        <img :src="value.imgSrc" class="classImg"/>
        <div class="classDeatils">
          <span class="detailsTitle">{{value.title}}</span>
          <span class="detailsTip">{{value.tip}}</span>
          <span class="detailsPeople">{{value.peopleNumber}}人参加 | {{value.cardNumber}}次打卡</span>
          <span class="detailsTime">{{value.createdAt}}</span>
        </div>
      </li>
    </ul>
    <footer1 :data="details"></footer1>
  </div>
</template>

<script>
import swiperComponents from '@/components/swiperComponents'
import footer1 from '@/components/footer1'
export default {
  data () {
      return {
          content: [],
          res: '',
          details: [
              {
                  title: '首页',
                  styleObject: {
                      background: '#fff',
                      width: '50%',
                      'background-img': 'http://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/daka/icon/home.png'
                  },
                  spanStyle: {
                      color: "#3a383f",
                      margin_top: "0"
                  },
                  index: 'first',
                  backgroundImg: 'http://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/daka/icon/home.png',
                  selectImg: 'http://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/daka/icon/home-active.png',
                  tag: '1',
                  hasIcon: 1
              },
              {
                  title: '我的',
                  styleObject: {
                      background: '#fff',
                      width: '50%',
                      'background-img': 'http://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/daka/icon/home.png'
                  },
                  spanStyle: {
                      color: "#707070",
                      margin_top: "0"
                  },
                  index: 'me',
                  backgroundImg: 'http://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/daka/icon/ucenter.png',
                  selectImg: 'http://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/daka/icon/ucenter-active.png',
                  tag: '0',
                  hasIcon: 1
              }
          ]
      }
  },
  components: {
    swiperComponents,
    footer1
  },
  methods: {
   search1(e){
    this.content=[];
    var searchValue=e.target.value;
    for(var i=0;i<this.res.length;i++)
    {
      if(this.res[i].title.indexOf(searchValue)!=-1)
      {
        this.filterContent(this.res[i]);
      }
    }
   },
   filterContent(value){
     var _this=this;
     var index=value.created_at.indexOf(" ");
     var created_at=value.created_at.slice(0,index)
     _this.content.push({
        imgSrc:value.img_url,
        title:value.title,
        tip:value.desc,
        peopleNumber:value.user_count,
        cardNumber:value.daka_count,
        id:value.id,
        createdAt:created_at
      })
   },
   select(id){
    this.$store.dispatch('setDakaId',id) 
    wx.navigateTo({
      url:'../index/main?id='+id
    })
   }
  },
  onShow () {
    var _this=this;
    _this.content=[];
    wx.request({
      url:'https://daka.rzkeji.com/api/daka/get-daka-list',
      method: "GET",
      header: {
        'content-type': 'application/json'
      },
      success(res){
      _this.res=res.data.data;
      console.log( _this.res)
       for(var i=0;i<_this.res.length;i++)
       {
        _this.filterContent(_this.res[i])
       }
      }
    })
  }
}
</script>

<style scoped>
ul{width: 100%;padding-bottom: 50px;}
ul li{width: 100%;background: #fff;display: flex;justify-content: row;border-bottom: 0.5px solid #D9D9D9;padding-bottom:10px;}
.classImg{width: 27%;height:82px;display: block;margin-top: 20px;margin-left: 10px;}
.classDeatils{width: 59%;margin-top: 20px;margin-left: 15px;height: 100px;}
.detailsTitle{width:100%;font-size:19px;font-weight: 600;display: block;line-height: 20px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.detailsTip{height: 25px;border-radius: 5px;font-size: 16px;line-height:25px;display: inline-block;margin-top: 7px;padding-left: 6px;padding-right: 6px;}
.detailsPeople{width: 60%;font-size: 12px;display: block;height: 20px;line-height: 20px;margin-top: 10px;color: #aaaaaa;float: left;}
.detailsTime{width: 40%;display: block;font-size: 12px;float: left;color: #aaaaaa;height: 20px;line-height: 20px;margin-top: 10px;}
</style>
